<script setup>
import { ref } from 'vue';
import TabNavigation from './components/TabNavigation.vue';
import ExampleViewer from './components/ExampleViewer.vue';

const examples = [
  { id: 'View01', title: '01.实现一个简单的3D场景', description: '创建一个基础Three.js场景，包含相机、渲染器和立方体网格。' },
  { id: 'View02', title: '02.平行光与环境光', description: '展示不同光源类型对场景的影响，包括平行光和环境光。' },
  { id: 'View03', title: '03.场景循环动画效果', description: '实现物体旋转和移动的动画效果，展示Three.js的动画能力。' },
  { id: 'View04', title: '04.动态更新场景', description: '演示如何动态添加、移除和修改场景中的物体。' },
  { id: 'View05', title: '05.阵列立方体', description: '创建由多个立方体组成的阵列，展示Three.js的批量渲染能力。' },
  { id: 'View06', title: '06.GUI使用', description: '集成dat.GUI库，创建可交互的控制面板来调整场景参数。' },
  { id: 'View07', title: '07.几何体顶点位置数据', description: '探索和修改几何体的顶点数据，创建自定义形状。' },
  { id: 'View08', title: '08.层级模型', description: '创建父子层级的3D模型，展示对象之间的层级关系。' },
  { id: 'View09', title: '09.遍历模型和查询模型', description: '演示如何遍历场景中的对象和查询特定属性。' },
  { id: 'View10', title: '10.纹理贴图', description: '应用纹理贴图到3D物体表面，增强视觉效果。' },
  { id: 'View11', title: '11.加载模型与环境贴图', description: '加载外部3D模型文件和应用环境贴图。' },
  { id: 'View12', title: '12.按钮与3D场景交互', description: '实现HTML按钮与3D场景的交互功能。' },
  { id: 'View13', title: '13.聚光源', description: '使用聚光源创建聚焦照明效果。' }
];

const currentExample = ref(examples[0]);

const selectExample = (example) => {
  currentExample.value = example;
};
</script>

<template>
  <div class="app-container">
    <TabNavigation
        :examples="examples"
        :current-example="currentExample"
        @select="selectExample"
    />
    <ExampleViewer :example="currentExample" />
  </div>
</template>

<style>
.app-container {
  display: flex;
}
</style>
